<template>
  <bossNavigation></bossNavigation>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航 -->
    <!-- 搜索区域 -->
    <div class="max-w-7xl mx-auto px-4 py-6">
      <div class="flex flex-col items-center mb-8">
        <h2 class="text-2xl font-bold text-blue-600 mb-6">人生赢家</h2>
        <div class="flex items-center justify-center gap-8">
          <div
            v-for="(rank, index) in [...talents]
              .sort((a, b) => b.score - a.score)
              .slice(0, 3)"
            :key="rank.id"
            class="relative flex flex-col items-center"
          >
            <div class="absolute -top-6">
              <el-icon class="text-yellow-400 text-2xl">
                <!-- <Ellipsis /> -->
              </el-icon>
            </div>
            <img
              :src="rank.avatar"
              :alt="rank.name"
              class="w-16 h-16 rounded-full object-cover border-4"
              :class="[
                index === 0
                  ? 'border-yellow-400'
                  : index === 1
                  ? 'border-gray-400'
                  : 'border-amber-600',
              ]"
            />
            <span class="mt-2 font-medium">{{ rank.name }}</span>
            <span class="text-sm text-gray-500">{{ rank.score }}分</span>
            <span
              class="mt-1 px-3 py-0.5 rounded-full text-xs"
              :class="[
                index === 0
                  ? 'bg-yellow-100 text-yellow-600'
                  : index === 1
                  ? 'bg-gray-100 text-gray-600'
                  : 'bg-amber-100 text-amber-600',
              ]"
            >
              {{
                index === 0 ? "荣耀王者" : index === 1 ? "最强王者" : "星耀王者"
              }}
            </span>
          </div>
        </div>
      </div>
      <h2 class="text-2xl font-bold text-blue-600 mb-6 text-center">
        王者市场
      </h2>
      <div class="flex items-center gap-4">
        <div class="flex-1 relative search-input-container">
          <el-icon
            class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
          >
            <Search />
          </el-icon>
          <input
            type="text"
            placeholder="搜索职位、技能、经验..."
            class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
          />
        </div>
        <el-select v-model="education" placeholder="学历要求" class="w-40">
          <el-option
            v-for="item in educationOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="skill" placeholder="技能要求" class="w-40">
          <el-option
            v-for="item in skillOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <!-- 人才列表 -->
    <div class="max-w-7xl mx-auto px-4 py-6">
      <div class="grid grid-cols-2 gap-6">
        <div
          v-for="talent in talents"
          :key="talent.id"
          class="bg-white rounded-lg shadow-sm p-6 cursor-pointer hover:shadow-md transition-shadow"
          @click="showDetail(talent)"
        >
          <div class="flex items-start gap-4">
            <img
              :src="talent.avatar"
              :alt="talent.name"
              class="w-16 h-16 rounded-full object-cover"
            />
            <div class="flex-1">
              <div class="flex items-center justify-between">
                <div>
                  <h3 class="text-lg font-medium">{{ talent.name }}</h3>
                  <p class="text-gray-600 mt-1">{{ talent.title }}</p>
                  <div
                    class="flex items-center gap-4 mt-2 text-sm text-gray-500"
                  >
                    <span>{{ talent.education }}</span>
                    <span>{{ talent.major }}</span>
                  </div>
                  <p class="mt-2 text-sm text-blue-600 italic">
                    "{{
                      [
                        "拥有十个脑子的全栈工程师，Bug 远离我百米之外",
                        "传说中的「架构上帝」，一个架构方案顶十个程序员",
                        "人工智能界的魔法师，让机器比人还聪明",
                        "产品经理的终极进化体，用户需求一秒猜透",
                        "设计界的美少女战士，鼠标一动天下都变美",
                        "安全界的守护天使，黑客见我绕道走",
                      ][talent.id - 1]
                    }}"
                  </p>
                </div>
                <div class="flex flex-col items-center">
                  <el-progress
                    type="dashboard"
                    :percentage="talent.score"
                    :width="80"
                    :height="60"
                    :stroke-width="10"
                    :format="(percentage) => `${percentage}分`"
                    class="transform scale-90"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="mt-4">
            <div ref="chartRefs" class="w-full h-60"></div>
          </div>
          <div class="mt-4 flex flex-wrap gap-2">
            <span
              v-for="tag in talent.tags"
              :key="tag"
              class="px-3 py-1 text-sm bg-blue-50 text-blue-600 rounded-full"
            >
              {{ tag }}
            </span>
          </div>
          <div class="mt-4 flex justify-end">
            <button
              class="px-4 py-1.5 text-sm bg-blue-500 text-white hover:bg-blue-600 !rounded-button whitespace-nowrap"
              @click.stop="showDetail(talent)"
            >
              查看详情
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 详情弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      width="800px"
      :title="selectedTalent?.name"
      destroy-on-close
    >
      <div v-if="selectedTalent" class="relative">
        <div class="flex items-start gap-6">
          <img
            :src="selectedTalent.avatar"
            :alt="selectedTalent.name"
            class="w-24 h-24 rounded-full object-cover"
          />
          <div class="flex-1">
            <h3 class="text-xl font-medium flex items-center gap-2">
              {{ selectedTalent.name }}
              <span class="text-lg font-normal text-gray-500">{{
                selectedTalent.title
              }}</span>
            </h3>
            <div class="mt-4 space-y-2 text-gray-600">
              <p>
                学历：{{ selectedTalent.education }} |
                {{ selectedTalent.major }}
              </p>
              <p>工作年限：{{ selectedTalent.experience }}年</p>
              <p>期望职位：{{ selectedTalent.expectJob }}</p>
            </div>
          </div>
          <div class="text-center">
            <div class="text-3xl font-semibold text-blue-500">
              {{ selectedTalent.score }}
            </div>
            <div class="text-sm text-gray-500 mt-1">综合评分</div>
          </div>
        </div>
        <div class="mt-8">
          <h4 class="text-lg font-medium mb-4">技能评估</h4>
          <div ref="detailChartRef" class="w-full h-64"></div>
        </div>
        <div class="mt-8">
          <h4 class="text-lg font-medium mb-4">掌握技能</h4>
          <div class="grid grid-cols-3 gap-4">
            <div
              v-for="(skill, index) in selectedTalent.skills"
              :key="index"
              class="bg-gray-50 p-4 rounded-lg"
            >
              <div class="flex items-center justify-between mb-2">
                <span class="text-gray-700">{{
                  ["技术能力", "问题解决", "学习能力", "团队协作", "项目经验"][
                    index
                  ]
                }}</span>
                <span class="text-blue-600 font-medium">{{ skill }}%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2">
                <div
                  class="bg-blue-500 h-2 rounded-full"
                  :style="{ width: skill + '%' }"
                ></div>
              </div>
            </div>
          </div>
        </div>
        <div class="mt-8">
          <h4 class="text-lg font-medium mb-4">工作经历</h4>
          <el-timeline>
            <el-timeline-item
              v-for="exp in selectedTalent.experiences"
              :key="exp.company"
              :timestamp="exp.time"
            >
              <h4 class="font-medium">{{ exp.company }}</h4>
              <p class="text-gray-600">{{ exp.position }}</p>
              <p class="text-sm text-gray-500 mt-2">{{ exp.description }}</p>
            </el-timeline-item>
          </el-timeline>
        </div>
        <div class="mt-8 flex justify-end gap-4">
          <button
            class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 !rounded-button whitespace-nowrap"
            @click="dialogVisible = false"
          >
            关闭
          </button>
          <button
            class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 !rounded-button whitespace-nowrap"
            @click="contactTalent"
          >
            发送邮件
          </button>
        </div>
      </div>
    </el-dialog>
    <!-- 邮件发送弹窗 -->
    <el-dialog
      v-model="mailDialogVisible"
      title="发送邮件"
      width="600px"
      destroy-on-close
    >
      <div class="space-y-4">
        <div class="flex items-start gap-4">
          <div class="w-20 text-right pt-2">发件人：</div>
          <el-input
            v-model="mailForm.from"
            placeholder="请输入您的邮箱地址"
            class="flex-1"
          />
        </div>
        <div class="flex items-start gap-4">
          <div class="w-20 text-right pt-2">收件人：</div>
          <div class="flex-1 flex items-center gap-2">
            <img
              :src="selectedTalent?.avatar"
              :alt="selectedTalent?.name"
              class="w-8 h-8 rounded-full object-cover"
            />
            <span>{{ selectedTalent?.name }}</span>
          </div>
        </div>
        <div class="flex items-start gap-4">
          <div class="w-20 text-right pt-2">主题：</div>
          <el-input
            v-model="mailForm.subject"
            placeholder="请输入邮件主题"
            class="flex-1"
          />
        </div>
        <div class="flex items-start gap-4">
          <div class="w-20 text-right pt-2">正文：</div>
          <el-input
            v-model="mailForm.content"
            type="textarea"
            :rows="6"
            placeholder="请输入邮件内容"
            class="flex-1"
          />
        </div>
      </div>
      <template #footer>
        <div class="flex justify-end gap-4">
          <button
            class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 !rounded-button whitespace-nowrap"
            @click="mailDialogVisible = false"
          >
            取消
          </button>
          <button
            class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 !rounded-button whitespace-nowrap"
            @click="sendMail"
          >
            发送
          </button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { Search, View } from "@element-plus/icons-vue";
// import { Ellipsis  } from '@element-plus/icons-vue'

import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import * as echarts from "echarts";
import type { EChartsOption } from "echarts";
import { ElMessage } from "element-plus";
import { Swiper, SwiperSlide } from "swiper/vue";
import bossNavigation from "../../views/bossNavigation.vue";
import { Pagination, Autoplay } from "swiper/modules";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const swiperModules = [Pagination, Autoplay];
const education = ref("");
const skill = ref("");
const dialogVisible = ref(false);
const selectedTalent = ref<any>(null);
const chartRefs = ref<HTMLElement[]>([]);
const detailChartRef = ref<HTMLElement>();
const educationOptions = [
  { value: "1", label: "本科" },
  { value: "2", label: "硕士" },
  { value: "3", label: "博士" },
];
const skillOptions = [
  { value: "1", label: "前端开发" },
  { value: "2", label: "后端开发" },
  { value: "3", label: "全栈开发" },
];
const talents = [
  {
    id: 1,
    name: "林志远",
    title: "全栈开发工程师",
    education: "本科",
    major: "计算机科学",
    score: 92,
    experience: 3,
    expectJob: "高级前端开发工程师",
    avatar:
      "https://ai-public.mastergo.com/ai/img_res/26d83890af9c8cf892b83694ee4235f7.jpg",
    tags: ["Vue.js", "React", "Node.js"],
    skills: [85, 80, 90, 75, 85],
    experiences: [
      {
        company: "科技创新有限公司",
        position: "前端开发工程师",
        time: "2020-2023",
        description: "负责公司核心产品的前端开发工作，实现了多个关键功能模块",
      },
      {
        company: "互联网科技有限公司",
        position: "初级前端工程师",
        time: "2018-2020",
        description: "参与企业官网改版项目，负责页面开发和性能优化",
      },
    ],
  },
  {
    id: 2,
    name: "王梓晨",
    title: "架构师",
    education: "硕士",
    major: "软件工程",
    score: 95,
    experience: 5,
    expectJob: "技术架构师",
    avatar:
      "https://ai-public.mastergo.com/ai/img_res/1885f6f2f9ae15087f3539a392967dba.jpg",
    tags: ["Java", "Python", "MySQL"],
    skills: [90, 85, 95, 80, 90],
    experiences: [
      {
        company: "云计算科技有限公司",
        position: "高级后端工程师",
        time: "2019-2023",
        description: "主导微服务架构改造，提升系统性能达300%",
      },
      {
        company: "数据科技有限公司",
        position: "后端工程师",
        time: "2017-2019",
        description: "负责核心业务系统的开发维护工作",
      },
    ],
  },
  {
    id: 3,
    name: "陈思涵",
    title: "数据科学家",
    education: "博士",
    major: "人工智能",
    score: 98,
    experience: 4,
    expectJob: "高级算法工程师",
    avatar:
      "https://ai-public.mastergo.com/ai/img_res/de809440c4d01186f036688c456bf4f8.jpg",
    tags: ["机器学习", "Python", "TensorFlow"],
    skills: [95, 90, 95, 85, 88],
    experiences: [
      {
        company: "智能科技研究院",
        position: "算法工程师",
        time: "2021-2023",
        description: "主导开发多个AI模型，实现了图像识别准确率提升40%",
      },
      {
        company: "人工智能科技公司",
        position: "数据分析师",
        time: "2019-2021",
        description: "负责大规模数据集的处理和分析，建立预测模型",
      },
    ],
  },
  {
    id: 4,
    name: "张润泽",
    title: "产品专家",
    education: "硕士",
    major: "工商管理",
    score: 89,
    experience: 6,
    expectJob: "产品总监",
    avatar:
      "https://ai-public.mastergo.com/ai/img_res/49b1af9485a0d16bcd5701dd5c237f16.jpg",
    tags: ["产品设计", "用户研究", "数据分析"],
    skills: [88, 92, 85, 95, 87],
    experiences: [
      {
        company: "互联网创新公司",
        position: "高级产品经理",
        time: "2020-2023",
        description: "负责核心产品的规划和迭代，带领团队完成多个重要项目",
      },
      {
        company: "电商科技公司",
        position: "产品经理",
        time: "2017-2020",
        description: "主导电商平台改版，提升用户转化率30%",
      },
    ],
  },
  {
    id: 5,
    name: "郑雅婷",
    title: "UI 设计师",
    education: "本科",
    major: "视觉设计",
    score: 94,
    experience: 4,
    expectJob: "设计总监",
    avatar:
      "https://ai-public.mastergo.com/ai/img_res/4ca9f1136ed20290f8606452e24c1905.jpg",
    tags: ["UI设计", "Figma", "动效设计"],
    skills: [95, 88, 92, 85, 90],
    experiences: [
      {
        company: "创意设计工作室",
        position: "高级UI设计师",
        time: "2021-2023",
        description: "负责多个大型项目的界面设计，建立了完整的设计系统",
      },
      {
        company: "数字科技公司",
        position: "UI设计师",
        time: "2019-2021",
        description: "参与企业产品的界面改版，优化用户体验",
      },
    ],
  },
  {
    id: 6,
    name: "黄嘉诚",
    title: "安全工程师",
    education: "硕士",
    major: "网络安全",
    score: 91,
    experience: 5,
    expectJob: "安全架构师",
    avatar:
      "https://ai-public.mastergo.com/ai/img_res/ac756d2ae0d44dabf4bc319cc6fe9c26.jpg",
    tags: ["网络安全", "渗透测试", "安全架构"],
    skills: [92, 88, 85, 90, 93],
    experiences: [
      {
        company: "网络安全科技公司",
        position: "高级安全工程师",
        time: "2020-2023",
        description: "主导企业级安全解决方案的设计与实施，处理多起重大安全事件",
      },
      {
        company: "互联网金融公司",
        position: "安全工程师",
        time: "2018-2020",
        description: "负责公司安全体系建设，实现了零重大安全事故",
      },
    ],
  },
];
const getChartOption = (skills: number[]): EChartsOption => ({
  animation: false,
  radar: {
    indicator: [
      { name: "技术能力", max: 100 },
      { name: "问题解决", max: 100 },
      { name: "学习能力", max: 100 },
      { name: "团队协作", max: 100 },
      { name: "项目经验", max: 100 },
    ],
  },
  series: [
    {
      type: "radar",
      data: [
        {
          value: skills,
          areaStyle: {
            color: "rgba(59, 130, 246, 0.2)",
          },
          lineStyle: {
            color: "#3b82f6",
          },
          itemStyle: {
            color: "#3b82f6",
          },
        },
      ],
    },
  ],
});
const isLoggedIn = ref(true
); // 添加登录状态标识
const showDetail = (talent: any) => {
  if (!isLoggedIn.value) {
    ElMessage({
      message: "请先登录/注册后查看人才详情",
      type: "warning",
    });
    return;
  }
  selectedTalent.value = talent;
  dialogVisible.value = true;
  setTimeout(() => {
    if (detailChartRef.value) {
      const chart = echarts.init(detailChartRef.value);
      chart.setOption(getChartOption(talent.skills));
    }
  });
};
const mailForm = ref({
  subject: "",
  content: "",
  from: "",
});
const mailDialogVisible = ref(false);
const contactTalent = () => {
  mailDialogVisible.value = true;
};
const sendMail = () => {
  // 实际发送邮件的逻辑
  mailDialogVisible.value = false;
  dialogVisible.value = false;
  // 重置表单
  mailForm.value = {
    subject: "",
    content: "",
    from: "",
  };
};
onMounted(() => {
  talents.forEach((talent, index) => {
    if (chartRefs.value[index]) {
      const chart = echarts.init(chartRefs.value[index]);
      chart.setOption(getChartOption(talent.skills));
    }
  });
});
function tologin() {
  router.push({ path: "/login" });
}
function toregister() {
  router.push({ path: "/register" });
}
</script>

<style scoped>
.el-select {
  width: 160px;
}

.search-input-container {
  position: relative;
  width: 100%;
}

.search-input-container .el-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* 确保图标不会干扰输入框的点击事件 */
}

.search-input-container input {
  padding-left: 2.5rem; /* 确保输入框的内容不会被图标遮挡 */
}
</style>
